<template>
  <div id="flex-demo">
    <div class="wrap">
      <div class="item1">item1</div>
      <div class="item2">item2</div>
      <div class="item3">item3</div>
      <div class="item4">item4</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FLexDemo",
};
</script>

<style>
#flex-demo {
  height: 100%;
}

.wrap {
  display: flex;
  height: 100%;
  width: 100%;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  /* background-color: #ccc; */
  background: no-repeat center/85%
    url("https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox/flex_terms.png");
}
.wrap > div {
  border: 2px black dashed;
  margin: 0px 40px;
  opacity: 0.7;
  font-size: 50px;
  padding: 10px;
box-shadow: 10px 5px 10px black;
}

.item1 {
  width: 200px;
  height: 100px;
  background-color: red;
}
.item2 {
  width: 200px;
  height: 200px;
  background-color: pink;
}
.item3 {
  width: 200px;
  height: 300px;
  background-color: green;
  color: white;
}
.item4 {
  width: 200px;
  height: 400px;
  background-color: blue;
  color: white;
}
</style>
